<template>
	<div id="app">
		<el-form :inline="true" :model="queryfrom" class="demo-form-inline">
			<el-form-item label="名称">
				<el-input v-model="queryfrom.name" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item label="仓库">
				<el-input v-model="queryfrom.storeName" placeholder="仓库"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="query('queryfrom')">查询</el-button>
			</el-form-item>
		</el-form>
		<el-dialog title="详细信息" :visible.sync="dialogTableVisible">
			<el-table :data="queryData">
				<el-table-column prop="id" label="编号" width="180"></el-table-column>
				<el-table-column prop="name" label="名称" width="180"></el-table-column>
				<el-table-column prop="storeName" label="仓库" width="180"></el-table-column>
				<el-table-column prop="houseName" label="摊位" width="180"></el-table-column>
				<el-table-column prop="quantity" label="件数" width="180"></el-table-column>
				<el-table-column prop="content" label="备注" width="180"></el-table-column>
			</el-table>
		</el-dialog>
		<el-table :data="productData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
			<el-table-column prop="id" label="编号" align="center" width="100"></el-table-column>
			<el-table-column prop="name" label="名称" align="center" width="200"></el-table-column>
			<el-table-column prop="storeName" label="仓库" align="center" width="200"></el-table-column>
			<el-table-column prop="houseName" label="摊位" align="center" width="200"></el-table-column>
			<el-table-column prop="quantity" label="件数" align="center" width="200"></el-table-column>
			<el-table-column prop="content" label="备注" align="center" width="200"></el-table-column>
		</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="productData.length">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				juese: '',
				dialogTableVisible: false,
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				queryData: [],
				productData: [],
				queryfrom: {
					name: '',
					storeName: '',
				},
			}
		},
		methods: {
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			findAll() {
				//查询所有
				this.$http.get("/product/findAll").then(res => {
					this.productData = res.data;
				});
			},
			query() {
				let _this = this;
				console.log(this.queryfrom);
				this.$http.post("/product/query", _this.queryfrom).then(res => {
					this.dialogTableVisible = true;
					this.queryData = res.data;
					return;
				});
			},
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
			this.findAll();
		}
	}
</script>

<style>
</style>